<template>
  <div class="container">
      <div class="container-header">
        <function-extension></function-extension>
      </div>
      <div class="container-content">
        <div class="container-content-left">
          <div class="view-section">
            <div class="view-section-header">
              <main-view></main-view>
            </div>
          </div>
          <div class="ui-section">
            <div class="ui-section-header">
              <ui-list></ui-list>
            </div>
          </div>
        </div>
        <div class="container-content-right">
          <div class="right-header">
            <style-list></style-list>
          </div>
          <div class="style-list"></div>
        </div>
      </div>
      <div class="container-bottom">
        <copyright></copyright>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import { home } from '@/api';
import { copyright, uiList, styleList, mainView, functionExtension }  from '@/components';

console.log(process.env, process.env.VUE_APP_BASE_API)
export default defineComponent({
  setup() {

    return {
    }
  },
  components: {
    copyright,
    uiList,
    styleList,
    mainView,
    functionExtension
  }
});
</script>

<style lang="scss" scoped>
$color: red;

@mixin header {
    width: 100%;
    height: 30px;
    background: rgb(242, 242, 242);
    line-height: 30px;
    text-align: center;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  &-header{
    width: 100%;
    height: 50px;
    background: rgb(250, 250, 250);
  }
  &-content{
    width: 100%;
    height: calc(100% - 100px);
    background: white;
    display: flex;
    &-left {
      width: calc(100% - 300px);
      height: 100%;
      background: red;
      display: flex;
      flex-direction: row;
      .view-section {
        flex-grow: 1;
        height: 100%;
        background: white;
        &-header{
          @include header;
          position: relative;
        }
      }
      .ui-section {
        width: 200px;
        height: 100%;
        background: rgb(242, 242, 242);
        border-left: 1px solid lightgray;
        &-header{
          @include header
        }
      }
    }
    &-right {
      width: 300px;
      height: 100%;
      background: rgb(250, 250, 250);
      border-left: 1px solid lightgray;
      .right-header {
        @include header
      }
      .style-list {
        width: 100%;
        height: 100%;
      }
    }
  }
  &-bottom {
    width: 100%;
    height: 50px;
    background: rgb(250, 250, 250);
    text-align: center;
  }
}
</style>